<template>
  <div class="record-container">
    <div>
      <div class="dotted-line">
        <div class="color-view" :style="{ backgroundColor: tagColor }"></div>
      </div>
    </div>

    <div class="flex flex-col flex-auto">
      <div class="flex flex-row">
        <p class="mr-2">
          {{ item.startTime.slice(0, item.startTime?.length - 3) }}
        </p>
        <div
          class="tag"
          v-if="item.stageName"
          :style="{
            color: tagColor,
            backgroundColor: calculateOpacity(tagColor, 0.1),
          }"
        >
          {{ item.stageName }}
        </div>
      </div>

      <div class="info-view cursor-pointer" @click="handleClick">
        <div class="info-item">
          <h2 class="text-sm font-bold">{{ item.subject }}</h2>
        </div>

        <div class="info-item" v-if="item.attendeeNames.length > 0">
          <h4>客户参会人</h4>
          <p>{{ item.attendeeNames.toString(",") }}</p>
        </div>

        <div v-if="item.coreSummary" class="info-item">
          <h4>内容概要</h4>
          <span class="text-sm"
            >{{ item.coreSummary || "-" }}
            <span
              v-if="item.salesAchievementStatus"
              class="text-[#436BFF] ml-2 rounded-sm text-sm bg-[#E6EBFD] px-1 py-1"
            >
              {{ item.salesAchievementStatus }}
            </span></span
          >
        </div>

        <div v-if="item.salesGoal" class="info-item">
          <h4>目标</h4>
          <span class="text-sm"
            >{{ item.salesGoal || "-" }}
            <span
              v-if="item.salesAchievementStatus"
              class="text-[#436BFF] ml-2 rounded-sm text-sm bg-[#E6EBFD] px-1 py-1"
            >
              {{ item.salesAchievementStatus }}
            </span></span
          >
        </div>

        <div v-if="item.salesAchievementAnalysis" class="info-item">
          <h4>达成分析</h4>
          <p>{{ item.salesAchievementAnalysis || "-" }}</p>
        </div>

        <div v-if="item.salesAchievement" class="info-item">
          <h4>成果</h4>
          <p>{{ item.achieveResult || "-" }}</p>
        </div>

        <div v-if="item.nextPlan" class="info-item">
          <h4>下一步</h4>
          <p>{{ item.nextPlan || "-" }}</p>
        </div>

        <div v-if="item.existRisk" class="info-item">
          <h4>风险</h4>
          <p>{{ item.existRisk || "-" }}</p>
        </div>
      </div>
    </div>
  </div>

  <van-dialog
    v-model:show="showMsgDialog"
    confirm-button-text="我知道了"
    confirmButtonColor="#436BFF"
  >
    <div class="p-6 text-[#262626] text-[16px]">
      <h5 class="mb-3">录制时长过短导致未生成录制文件，为确保录制质量,建议：</h5>
      <ul>
        1. 录音设备靠近声源，确保收音清晰
      </ul>
      <ul>
        2. 录制时避免误触界面，防止意外结束
      </ul>
    </div>
  </van-dialog>
</template>

<script setup>
import { defineProps, computed, ref } from "vue";
import { openMeetingRecord } from "@/utils/urlTool";
import { calculateOpacity } from "@/utils/colorTool";
import { showToast } from "vant";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
  tagColor: {
    type: String,
    default: () => "#436bff",
  },
});

const showMsgDialog = ref(false);

function handleClick() {
  const item = props.item;

  const conferenceId = item.conferenceId;
  if (!conferenceId) {
    showToast("会议id不存在");
    return;
  }

  router.push({
    path: `/record/${conferenceId}`,
  });
}
</script>

<style lang="less" scoped>
.record-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;

  .date-info {
    margin-top: 4px;
    font-weight: 400;
    font-size: 12px;
    color: #262626;
    line-height: 20px;
  }

  .color-view {
    background-color: #436bff;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    position: absolute;
    top: 0px;
    left: -3px;
  }

  .dotted-line {
    margin-left: 12px;
    margin-right: 12px;
    border-right: 1px solid #bfbfbf;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    .color-view {
      top: 10px;
    }
  }

  .dotted-line-first {
    margin-top: 42px;
    height: calc(100% - 42px);
    .color-view {
      top: 0px;
    }
  }

  .dotted-line-last {
    margin-bottom: 100px;
    height: 42px;
  }
  .info-view {
    background-color: #f9fafc;
    padding: 16px;
    border-radius: 4px;
    margin: 8px 0 8px 0;
    flex: 1;

    .des {
      font-weight: 400;
      font-size: 12px;
      color: #8c8c8c;
      line-height: 20px;
    }
  }
}
.tag {
  display: inline-block;
  font-weight: 500;
  font-size: 12px;
  width: auto;
  color: #436bff;
  padding: 4px;
  border-radius: 2px;
  background-color: #e6ebfd;
  color: white;
}

.info-item {
  margin-bottom: 8px;
  h4 {
    color: #8c8c8c;
    font-size: 14px;
    line-height: 22px;
  }

  p {
    font-weight: 400;
    font-size: 14px;
    color: #262626;
    line-height: 22px;
  }
}
</style>
